<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>更新岗位</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button
                type="primary"
                icon="el-icon-document-checked"
                size="mini"
                @click="save"
              >
                保存
              </el-button>
            </div>
            <div class="buttonBox">
              <el-button
                type="primary"
                icon="el-icon-document-remove"
                size="mini"
                @click="confirmDel"
              >
                删除
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form
            ref="form"
            :model="data"
            :inline="true"
            :rules="formRules"
          >
            <el-input v-model="data.id" type="hidden" />
            <el-row :gutter="10">
              <el-col :span="4">
                <el-form-item>
                  <div>编码</div>
                  <el-input
                    v-model="data.coding"
                    size="mini"
                    prop="coding"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input
                    v-model="data.name"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="status">
                  <div>状态</div>
                  <el-select
                    v-model="data.status"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, index) in theStatus"
                      :key="index"
                      :label="item"
                      :value="index"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="parent_id">
                  <div>班组</div>
                  <v-select
                    v-model="data.parent_id"
                    action="classList"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="admin_id">
                  <div>维护负责人</div>
                  <v-select
                    v-model="data.admin_id"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input
                    v-model="data.sort"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="其他负责人">
              <el-table :data="list">
                <el-table-column
                  label="员工"
                  prop="admin.name"
                  min-width="16%"
                />
                <el-table-column
                  label="电话"
                  prop="admin.phone"
                  min-width="16%"
                />
                <el-table-column
                  label="电话2"
                  prop="admin.phone2"
                  min-width="16%"
                />
                <el-table-column
                  label="邮箱"
                  prop="admin.email"
                  min-width="25%"
                />
                <el-table-column
                  label="重要性"
                  prop="weight"
                  min-width="16%"
                  :formatter="weightFormat"
                />
                <el-table-column
                  min-width="8%"
                  label="操作"
                >
                  <template scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="otherAdminDel(scope.row.id)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
                <div slot="append">
                  <el-row :gutter="10">
                    <el-form
                      ref="append_form"
                      :model="data"
                      inline
                      class="hf_form append_other_admin"
                      :rules="appendRules"
                    >
                      <el-col :span="4">
                        <el-col :span="18">
                          <el-form-item prop="admin_id">
                            <v-select
                              v-model="data.admin_id"
                            />
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col :span="4">
                        <el-col :span="20">
                          <el-form-item label>
                            <el-input
                              :disabled="true"
                              size="mini"
                            />
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col :span="4">
                        <el-col :span="20">
                          <el-form-item label>
                            <el-input
                              :disabled="true"
                              size="mini"
                            />
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col :span="6">
                        <el-col :span="18">
                          <el-form-item label>
                            <el-input
                              :disabled="true"
                              size="mini"
                            />
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col :span="4">
                        <el-col :span="20">
                          <el-form-item prop="weight">
                            <el-select
                              v-model="data.weight"
                              size="mini"
                            >
                              <el-option
                                v-for="(item, index) in weight"
                                :key="index"
                                :value="index"
                                :label="item"
                              />
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </el-col>
                      <el-col :span="2">
                        <el-form-item label>
                          <el-button
                            icon="el-icon-upload2"
                            size="mini"
                            @click="append"
                          />
                        </el-form-item>
                      </el-col>
                    </el-form>
                  </el-row>
                </div>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :span="4">
                  <div>
                    <span>创建时间日期</span>
                    <el-input
                      v-model="data.create_time"
                      placeholder="创建时间日期"
                      class="mtb10"
                      size="mini"
                      :disabled="true"
                    />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input
                      v-model="data.cr_admin.name"
                      placeholder="创建人"
                      class="mtb10"
                      size="mini"
                      :disabled="true"
                    />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input
                        v-model="data.update_time"
                        placeholder="最近更新"
                        class="mtb10"
                        size="mini"
                        :disabled="true"
                      />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input
                        v-model="data.up_admin.name"
                        placeholder="更新者"
                        class="mtb10"
                        size="mini"
                        :disabled="true"
                      />
                    </div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <wangeditor id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import API from '@/api/personnel/job'
import { theStatus, weight } from '@/utils/options'
import Wangeditor from '@/components/editor/wangeditor'
import VSelect from '@/components/select'
export default {
  inject: ['backUrl', 'delOne', 'update', 'appendOtherAdmin', 'delOtherAdmin', 'getWeightFormat'],
  components: {
    Wangeditor,
    VSelect
  },
  data() {
    return {
      data: {
        'admin': {
          'phone': ''
        },
        'cr_admin': {
          'name': ''
        }
      },
      list: [],
      theStatus,
      weight,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入岗位名称',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        admin_id: [
          {
            required: true,
            message: '请选择维护负责人',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      appendRules: {
        admin_id: [
          {
            required: true,
            message: '请选择员工',
            trigger: 'change'
          }
        ],
        weight: [
          {
            required: true,
            message: '请选择重要性',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {},
  created() {
    const id = this.$route.params.id
    API.getOne(id).then(response => {
      if (response.data.error_code === 75404) {
        this.$alert('您请求的岗位不存在', '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.$router.push('/personnel/job_list/')
          }
        })
      }
      this.data = response.data
      this.list = response.data.other_admin
    })
  },
  methods: {
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    append() {
      const thisForm = this.$refs.append_form
      const admin_data = {
        'admin_id': this.data.admin_id,
        'department_id': this.$route.params.id,
        'weight': this.data.weight
      }
      const errorCode = 75004
      const errorMessage = '该人员已存在'
      this.appendOtherAdmin(API, thisForm, admin_data, errorCode, errorMessage)
    },
    otherAdminDel(id) {
      const admin_data = {
        'id': id
      }
      this.delOtherAdmin(API, id, admin_data)
    },
    weightFormat(row) {
      return this.getWeightFormat(row)
    }
  }
}
</script>
